<!DOCTYPE html>  
<head>
<meta charset="utf-8" />
<title>gdata Test v0.1</title>  

<link rel="stylesheet" type="text/css" href="css/ui-darkness/jquery-ui-1.8.4.custom.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="gdata.js"></script>

<script language="javascript" type="text/javascript">  

google.load("gdata", "1.x");

$(function() {
  gd = new GDataLogin();
  $("#login_btn").button();
  $("#login_btn").bind('click', function() {
                        gd.logIn();
                        loginRefresh();
                      });
  $("#logout_btn").button();
  $("#logout_btn").bind('click', function() {
                        gd.logOut();
                        loginRefresh();
                      });
  $("#getmore").button();
  $("#getmore").bind('click', getmore);

  $("#login_btn").hide();
  $("#logout_btn").hide();
  loginRefresh();
});

function getmore() {
  getmore.max = 10;
  if(typeof getmore.start == 'undefined') {
    getmore.start = 1;
  }
  gd.fetchContacts(getmore.start, getmore.max, contactCallback, contactError);
  getmore.start = getmore.start + getmore.max;
}

function loginRefresh() {
  if(gd.loginCheck()) {
    getmore();
    $("#logout_btn").show();
    $("#loginmsg").html("Welcome ");
  }
  else {
    $("#login_btn").show();
    $("#loginmsg").html("Not logged in ");
  }
}

function contactCallback(emailArr) {
  var j = 0;

  for (j = 0; j < emailArr.length; j++) {
    $("#emails").append(emailArr[j] + "<br>");
  }
  $("#emails").append("<hr>");
  $("#loginmsg").html("Welcome, " + gd.getUser());
}

function contactError(e) {
    alert(e.cause ? e.cause.statusText : e.message);
}

</script>
</head>
<body>
<div id="hdr" style="height: 40px;">
  <span><b>liveBoard 3</b></span>
  <span id="hdrmsg" style="float: right;">
    <img src="loading.gif" style="position: absolute; top: -100px;" />
    <span id="loginmsg"></span>
    <button id='login_btn'>Login</button>
    <button id='logout_btn'>Logout</button>
  </span>
</div>
<div id="emails">
    <button id='getmore'>Get More</button>
</div>

</body>
</html>
